import QtQuick 2.15
import QtQuick.Controls 2.15
import Qt5Compat.GraphicalEffects
Rectangle {
    id: switchRoot
    // 核心状态属性
    property bool checked: true
    // 基础样式属性
    property color activeColor: "#4cd964"      // 开启时背景色
    property color inactiveColor: "#e5e5e5"    // 关闭时背景色
    property color thumbColor: "white"         // 滑块颜色
    property color textColorOn: "white"        // "开"文字颜色
    property color textColorOff: "#666"        // "关"文字颜色
    property int trackHeight: 32               // 开关高度
    property int trackWidth: trackHeight * 2 // 加宽轨道容纳固定文字
    property int thumbSize: trackHeight * 0.75 // 滑块大小
    // 边框属性
    property int borderWidth: 1
    property color activeBorderColor: "#3da656"
    property color inactiveBorderColor: "#d0d0d0"
    // 文字边距（控制文字与边缘/滑块的距离）
    property int textMargin: 10

    property string onText : ""
    property string offText : ""

    // 组件基础样式
    width: trackWidth
    height: trackHeight
    radius: trackHeight / 2
    color: checked ? activeColor : inactiveColor
    border.width: borderWidth
    border.color: checked ? activeBorderColor : inactiveBorderColor

    // 状态变化信号
    signal toggled(bool checked)

    // 滑块（位置避开文字区域）
    Rectangle {
        id: thumb
        width: thumbSize
        height: thumbSize
        radius: thumbSize / 2
        color: thumbColor
        // 滑块位置：开启时居右（不遮挡左侧"开"），关闭时居左（不遮挡右侧"关"）
        x: checked
            ? (switchRoot.width - width - borderWidth - textMargin/2) // 右侧：距离右边缘=边框+半个文字边距
            : (borderWidth + textMargin/2) // 左侧：距离左边缘=边框+半个文字边距
        y: (switchRoot.height - height)/2
        z: 2 // 滑块置于文字上方，但位置避开文字区域

        // 滑块阴影
        layer.enabled: true
        layer.effect: DropShadow {
            color: "#80000000"
            radius: 2
            samples: 5
        }
    }

    // "开"文字（固定左侧，仅开启时显示）
    Text {
        id: textOn
        text: onText
        color: textColorOn
        font.pixelSize: trackHeight * 0.4
        font.bold: true
        // 固定左侧：距离左边缘=边框+文字边距，垂直居中
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        anchors.leftMargin: borderWidth + textMargin
        visible: checked // 仅开启时可见
        z: 1 // 置于滑块下方

        // 淡入淡出动画
        opacity: visible ? 1 : 0
        Behavior on opacity {
            NumberAnimation { duration: 200 }
        }
    }

    // "关"文字（固定右侧，仅关闭时显示）
    Text {
        id: textOff
        text: offText
        color: textColorOff
        font.pixelSize: trackHeight * 0.4
        font.bold: true
        // 固定右侧：距离右边缘=边框+文字边距，垂直居中
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: borderWidth + textMargin
        visible: !checked // 仅关闭时可见
        z: 1 // 置于滑块下方

        // 淡入淡出动画
        opacity: visible ? 1 : 0
        Behavior on opacity {
            NumberAnimation { duration: 200 }
        }
    }

    // 点击交互
    MouseArea {
        anchors.fill: parent
        cursorShape: Qt.PointingHandCursor
        onClicked: {
            forceActiveFocus()
            switchRoot.checked = !switchRoot.checked;
            switchRoot.toggled(switchRoot.checked);
        }
    }

    // 动画效果
    PropertyAnimation { // 滑块滑动动画
        target: thumb
        properties: x
        duration: 200
        easing.type: Easing.InOutQuad
    }
    ColorAnimation on color { // 背景色过渡
        duration: 200
        easing.type: Easing.InOutQuad
    }
    ColorAnimation on border.color { // 边框色过渡
        duration: 200
        easing.type: Easing.InOutQuad
    }
}
